<template>
  <div class="myNav">
    <ul>
      <li :class="thisNav === '0' ? 'thisNavCss' : ''" @click="tourl('/my')"><span>修改名片</span></li>
      <li :class="thisNav === '1' ? 'thisNavCss' : ''" @click="tourl('/release')"><span>我的发布</span></li>
      <li :class="thisNav === '2' ? 'thisNavCss' : ''" @click="tourl('/collaborationHistory')"><span>合作历史</span></li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
const router = useRouter();
const props = defineProps({
  thisNav: {
    type: String,
    default: null
  }
});
const tourl = (url:any) => {
  router.push(url)
}
</script>
<style scoped>
.myNav{
  padding: 10px 30px 10px 30px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}
.myNav ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
.myNav li {
  color: #999;
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 13px;
  margin-top: 13px;
  cursor: pointer;
}
.myNav li:last-child{
  border-bottom: 0;
}
.myNav li:nth-child(1) span{
  background: url("@/assets/image/ic_my_card.png") no-repeat center left;
  background-size: 14px;
  padding-left: 24px;
}
.myNav li:nth-child(1).thisNavCss span{
  background: url("@/assets/image/ic_my_card2.png") no-repeat center left;
  background-size: 14px;
  padding-left: 24px;
}
.myNav li:nth-child(2) span{
  background: url("@/assets/image/ic_my_publish.png") no-repeat center left;
  background-size: 14px;
  padding-left: 24px;
}
.myNav li:nth-child(2).thisNavCss span{
  background: url("@/assets/image/ic_my_publish2.png") no-repeat center left;
  background-size: 14px;
  padding-left: 24px;
}
.myNav li:nth-child(3) span{
  background: url("@/assets/image/ic_my_look.png") no-repeat center left;
  background-size: 14px;
  padding-left: 24px;
}
.myNav li:nth-child(3).thisNavCss span{
  background: url("@/assets/image/ic_my_look2.png") no-repeat center left;
  background-size: 14px;
  padding-left: 24px;
}
.myNav li.thisNavCss span,.myNav li.thisNavCss:hover span{
  color: #333;
  font-weight: bold;
}
.myNav li:hover span{
  color: #409eff;
}
</style>